<template>
  <view class="store_content">
    
    <!-- 内容区域 -->
    <view class="container">
      <!-- 基础内容 -->
      <view class="entity_box">
        <!-- title -->
        <view class="title">基础信息</view>
        <!-- 内容 -->
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">店铺logo</view>
            <image class="icon-g" :src="storeInfo.logoUrl" />
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>

        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">店铺名称</view>
            <view class="meun-i">{{ storeInfo.storeName }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>

        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">主营类目</view>
            <text class="menu-v">{{ storeInfo.main }}</text>
          </view>
        </view>

        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">辅营类目</view>
            <text class="menu-v">{{ storeInfo.auxiliary }}</text>
          </view>
        </view>

        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">销售区域</view>
            <view class="meun-i">{{ storeInfo.address }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>
        <!-- 实仓时显示  avtive -->
        <block v-if="active == 0">
          <view class="menu-l-wrap">
            <view class="menu-i" @tap="onRedirectPage">
              <view class="menu-t">关联仓库</view>
              <view class="meun-i">{{ storeInfo.warehouse }}</view>
              <image class="icon-g" src="/static/images/ic_go.png" />
            </view>
          </view>
        </block>
      </view>

      <!-- 店铺设置 -->
      <view class="virtual_box">
        <!-- title -->
        <view class="title">店铺设置</view>
        <!-- 内容 -->
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">店铺简介</view>
            <view class="meun-i">{{ storeInfo.info }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">店铺公告</view>
            <view class="meun-i">{{ storeInfo.nnouncement }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">客服电话</view>
            <view class="meun-i">{{ storeInfo.phone }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">店铺详细介绍</view>
            <view class="meun-i">{{ storeInfo.introduce }}</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
        </view>
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">是否提供发票</view>
          </view>
        </view>
        <view class="menu-l-wrap">
          <view class="menu-i" @tap="onRedirectPage">
            <view class="menu-t">
            <text>店铺介绍图片</text>
            <text class="menu-v text_l">长按拖动修改顺序</text>
            </view>
            <view class="menu-v">查看实例</view>
            <image class="icon-g" src="/static/images/ic_go.png" />
          </view>
          
        </view>
      </view>
    </view>

    <view class="store_btn">
      <button class="btn">提交</button>
    </view>
  </view>
</template>

<script>
const TAB_MENU = [
  {
    //首部的两种联仓表
    label: "实仓联营",
    value: 0,
  },
  {
    label: "虚仓联营",
    value: 1,
  },
];
export default {
  name: "storeStrategy",
  data() {
    return {
      tabMenu: TAB_MENU,
      active: 0,
      //数据
      storeInfo: {
        logoUrl: "/static/images/ic_go.png",
        storeName: "寻常小店",
        main: "奶茶",
        auxiliary: "烟酒",
        address: "湖北武汉市关山大道保利国际大师330号",
        warehouse: "东北仓，武汉仓，信阳仓，上海仓，北京仓",
        info: "这是一个成立了十年的老店…",
        nnouncement: "公告内容公告内容公告内容…",
        phone: "区号-13048958796",
        introduce: "介绍内容介绍内容介绍内容…",
        // storeName:'东北仓，武汉仓，信阳仓，上海仓，北京仓',
      },
    };
  },
  methods: {
    onTab(value) {
      //在两类员工中切换
      this.active = value;
      console.log("ohh");
    },
    onRedirectPage() {
      console.log("ohh");
    },
  },
  onLoad(e) {},
  created() {},
  computed: {},
};
</script>

<style lang="scss" scoped>
.store_content {
  background: #f6f6f6;
  // ta栏切换
  .tab-wrap {
    background: #ffffff;
    display: flex;
    position: fixed;
    top: 0rpx;
    left: 0;
    right: 0;
    z-index: 999;
    .menu-wrap {
      flex: 1;
      font-size: 28rpx;
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
    }
    .active {
      color: #2f80fb;
      text {
        display: inline-block;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          width: 50%;
          height: 2px;
          bottom: 0;
          background: #2f80fb;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .container {
    margin-top: 88rpx;
    .title {
      color: #999;
      height: 90rpx;
      line-height: 90rpx;
      padding-left: 44rpx;
      font-size: 26rpx;
    }
    .menu-l-wrap {
      background: #ffffff;
      margin-top: 1rpx;
      // border-bottom: 1px solid #f6f6f6;
      .menu-i {
        height: 92rpx;
        line-height: 92rpx;
        padding-right: 24rpx;
        margin-left: 24rpx;
        display: flex;
        align-items: center;
        border-top: 1px solid #ededed;
        .icon-b {
          width: 44rpx;
          height: 44rpx;
        }
        .icon-g {
          width: 36rpx;
          height: 36rpx;
        }
        .menu-t {
          flex: 1;
          font-size: 32rpx;
          margin-left: 20rpx;
          color: #333;
        }
        .meun-i {
          width: 410rpx;
          line-height: 46rpx;
          font-size: 32rpx;
          text-align: right;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .menu-v {
          font-size: 26rpx;
          color: #999;
        }
        .text_l{
          text-align: left;
          padding-left: 8rpx;
        }

        .menu-logout {
          text-align: center;
          flex: 1;
          font-size: 30rpx;
        }
      }
      .menu-i:first-child {
        border-top: 0;
      }
    }
  }
  .store_btn {
    width: 702rpx;
    height: 80rpx;
    margin: 200rpx auto 16rpx;
    .btn {
      background: #2f80fb;
      border-radius: 12rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: 400;
    }
  }
}
</style>
